<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/youyi.css"/>
		<link rel="stylesheet" type="text/css" href="../css/environmental.css"/>
		<title>忘记密码</title>
		<style type="text/css">
			body{background:#fff;}
			.mui-scroll-wrapper{top: 44px;}
			.mui-scroll{text-align: center;}
			.mui-content{background-color: transparent;}
			.for_phone{line-height:18px; margin-bottom: 12px;}
			.for_phone a{color: #5ec520;}
			.mui-popup-buttons span:nth-child(1){background-color: #5ec520;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav top_nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left detail_left"></a>
			<h1 id="title" class="mui-title">忘记密码</h1>
			<!--<a id="info" class="mui-icon iconfont icon-caidan mui-pull-right"></a>-->
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
			    <div class="mui-scroll">
			        <div class="phone_regist_wrap">
						<div class="login_form">
							<p class="for_phone mui-text-left">想通过<a id="emailOrPhone"  onclick="emailOrPhone()" class=""> 手机号 </a>找回密码？</p>
							<div class="mui-input-row">
								<input type="tel" id="eAdresOrPhoneAres" placeholder="请输入邮箱地址" class="email_adres">
							</div>
							<div class="mui-input-row psw_row">
								<input type="password" placeholder="输入新密码"  class="psw">
								<span class="showPsw"></span>
							</div>
							<div class="mui-input-row yzm_row">
								<input type="text" placeholder="输入您收到的验证码"  class="yzm_input">
								<a href="javascrpt:;" class="get_yzm">获取验证码</a>
							</div>
						</div>
					</div>
					<div class="aggrement_serve">
						<p class="active">我同意并接受<a href="javscript:;">《优蚁用户协议》</a></p>
					</div>
					<div class="next_step">
						<a href="login.html" class="mui-btn mui-btn-block next_step_btn">确定</a>
					</div>
					<img src="../images/login/email_default (2).png" class="email_img_bottom"/>
			    </div>
			</div>
			
		</div>
<div class="popup-backdrop popup-backdrop2">
	<div class="popup popup-in">
		<div class="popup-inner"><div class="popup-text">已找回密码！</div></div>
		<div class="popup-buttons"><span class="popup-button popup-button-bold">确定</span></div>
	</div>
</div>
<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//切换密码找回方式
	function emailOrPhone() {
		var phone = $("#emailOrPhone");
		var phoneArea=$("#eAdresOrPhoneAres");
		var phoneText=phone.text();
		if(phoneText.trim() == "邮  箱"){
			phone.text(" 手机号 ");
			phoneArea.attr("placeholder","请输入邮箱地址");
		}else{
			phone.text(" 邮  箱 ");
			phoneArea.attr("placeholder","请输入手机号");
		};
	};

	mui.ready(function() {
		document.querySelector(".showPsw").addEventListener("tap", function() {
			$(this).toggleClass("active");
			if ($(this).hasClass("active")) {
				$(this).prev().attr("type", "text");
			} else {
				$(this).prev().attr("type", "password");
			};
		});
		mui(".mui-scroll-wrapper").scroll();
		//验证码发送时间
		time.wait = 10;
		function time(defaule, waitTime) {
			if (time.wait == 0) {
				defaule.off("click").on("click", function() {
					getData();
				});
				defaule.text("获取验证码");
				time.wait = waitTime;
			} else {
				defaule.off("click");
				defaule.text("重发(" + time.wait-- + ")");
				setTimeout(function() {
					time(defaule, waitTime);
				}, 1000);
			};
		};
		
		$(".get_yzm").click(getData);		
		function getData(){				
			var email = $(".eAdresOrPhoneAres").val();				
			var flag = checkData();
			if (flag && email != "") {
				//alert(email);
				time($(".get_yzm"), time.wait);
				mui.post('../system/getAuthcode', {
					email : email
				}, function(data) {
					if (data.msg == false) {
						mui.toast("获取失败！请重试。");
					} else {
						mui.toast("发送成功！");
					}
				}, 'json');
			}
		};

		$(".next_step_btn").click(function(e) {
			$(this).theA=this.href;
				e.preventDefault();
			var loginName = $(".email_adres").val();
			var pwd = $(".psw").val();
			var authCode = $(".yzm_input").val();

			if (loginName == "" || pwd == "" || authCode == "") {
				mui.toast("请填写完整信息！");
				return;
			};
			$(".popup-backdrop2").fadeIn(200);
			mui.post('../system/forgetPwd', {
				loginName : loginName,
				pwd : pwd,
				authCode : authCode
			}, function(data) {
				console.log(data.msg);
				if (data.msg == false) {
					mui.toast("验证码不正确或已超时！");
				} else {
					mui.openWindow(data.msg);
				};
			}, 'json');
		});

	});
	
	function checkData() {
		var phone = $("#emailOrPhone");
		var phoneArea=$("#eAdresOrPhoneAres");
		var phoneText=phone.text();
		
		if (phoneText.trim() == "手机号") {
			var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			if (!filter.test(phoneText)) {
				mui.toast('请输入正确的邮箱！');
				//$(".popup-backdrop").fadeIn(200);
				phoneArea.val("");
				phone.focus();
				return false;
			};
		} else {
			if (!(/^1\d{10}$/.test(phoneArea.val()))) {
				mui.toast('手机号不正确！');
				//mui.alert('请正确输入手机号','提示','确定');
				phoneArea.val("");
				phone.focus();
				return false;
			};
		};
		return true;
	};
mui("body").on("tap",".popup-backdrop,.popup-button-bold",function(e){
	e.stopPropagation();
	if($(e.target).hasClass("popup-backdrop")){
		$(".popup-backdrop2").fadeOut(200);
	}else if($(e.target).hasClass("popup-button-bold")){
		$(".popup-backdrop2").fadeOut(200);
		mui.toast("您点击了确定按钮！");
		setTimeout(function(){
			mui.openWindow($(".next_step_btn").prop("href"));
		},300);
	};
});
</script>
	</body>
</html>
